<template>
    <div>
        <div class="btn">
            <div> <el-button type="primary" @click="exportClick">导出</el-button>
                <el-button type="primary">
                    <div class="xls">
                        <span>导入</span>
                        <input type="file" accept=".xls,.xlsx" class="upload-file" ref="uploadImgBtn"
                            @change="Excel($event)" />
                    </div>
                </el-button>
            </div>
        </div>

        <div id="table">
            <el-table :data="data.tableData" :default-sort="{ prop: 'date', order: 'descending' }" style="width: 100%">
                <el-table-column type="index" label="序号" />
                <el-table-column prop="username" label="姓名" sortable />
                <!-- <el-table-column prop="staffPhoto" label="头像" /> -->
                <el-table-column prop="mobile" label="手机号" sortable />
                <el-table-column prop="workNumber" label="工号" sortable />
                <el-table-column prop="formOfEmployment" label="聘用形式" sortable>
                    <template #default="scope">
                        {{ scope.row.formOfEmployment == 1 ? '聘用' : '未聘用' }}
                    </template>
                </el-table-column>
                <el-table-column prop="departmentName" label="部门" sortable />
                <el-table-column prop="timeOfEntry" label="入职时间" sortable />
            </el-table>
        </div>
    </div>
</template>
<script setup>
import { useStore } from 'vuex';
import { ref, reactive } from 'vue';
import { getuseremplist, importTable } from '../../http/http'
import XLXS from "xlsx";
import * as XLSX from "xlsx"; //引入
import FileSaver from "file-saver";

let store = useStore()

let data = reactive({
    pages: {
        page: 1,
        size: 10,
    },
    tableData: []
})

getuseremplist({ page: data.pages.page, size: data.pages.size }).then((res) => {
    console.log(29 + '员工', res);
    data.tableData = res.data.rows
})

// 导出
const exportClick = () => {
    // 导出文件名
    const filename = "人力资源.xlsx";
    // 导出表格加id,通过id获取要导出的表单
    const wb = XLXS.utils.table_to_book(document.getElementById("table"));
    const wbout = XLXS.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
    });
    try {
        FileSaver.saveAs(
            new Blob([wbout], {
                type: "application/octet-stream",
            }),
            filename
        );
    } catch (e) {
        console.log(e);
    }
    return wbout;
};

// 导入
// 导入
function Excel(w) {
    const files = w.target.files
    if (files.length <= 0) {
        return false
    } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        return false
    }
    // 读取表格
    const fileReader = new FileReader()
    fileReader.onload = (ev) => {
        const workbook = XLSX.read(ev.target.result, {
            type: "binary"
        })
        const wsname = workbook.SheetNames[0]
        const xl = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
        dealExcel(xl) //...对数据进行自己需要的操作 
        data.tableData.value = xl
    }
    fileReader.readAsBinaryString(files[0])
}

function dealExcel(xl) {
    let keymap = {  // 根据所要导入的文件转换开头
        入职时间: "timeOfEntry",
        手机号: "mobile",
        姓名: "username",
        转正日期: "correctionTime",
        工号: "workNumber",
        部门: "departmentName",
        聘用形式: "formOfEmployment",
    }
    xl.forEach(sourceObj => {
        Object.keys(sourceObj).map(keys => {
            let newKey = keymap[keys]
            if (newKey) {
                sourceObj[newKey] = sourceObj[keys]
                delete sourceObj[keys]
            }
        })
    })
    data.tableData.push(...xl)
}


</script>
<style lang="scss" scoped>
.btn {
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>